<template>
  <div class="layout-pd">
    <div class="container">
      <div class="search-btns">
        <div class="btns">
          <el-button v-if="auth(state.isHasAdd)" size="default" color="#18bc9c" @click="addFn">+ 添加</el-button>
        </div>
      </div>
      <div class="tables">
        <YxTable :header-cell-style="{ background: '#f5f7fa' }" border :selection="false" :isSerialNum="false"
          :data="state.tableData" :columnData="state.columnData" :isPage="true" :showOperator="true"
          :total="state.total" :page="state.pages.page" :psize="state.pages.limit" @size-change="sizeChange"
          @current-change="currentChange">
          <template v-slot:status="{ row }">
            <span>{{ status[row.status] }}</span>
          </template>
          <template v-slot:operate="{ row }">
            <el-button v-if="auth(state.isHasEdit)" @click="operateFn('edit', row)" type="primary" text
              size="small">编辑</el-button>
          </template>
        </YxTable>
      </div>
    </div>
    <AddDialog ref="addDialogRef" @updateList="getData"></AddDialog>
  </div>
</template>

<script setup name="paymentMethodIndex">
import { PostPaymentMethodsIndex } from '/@/api/payment/index';
import { payColumn } from '/@/commmon/column';
import { auth } from '/@/utils/authFunction';
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
const YxTable = defineAsyncComponent(() => import('/@/components/YxTable/index.vue'));
const AddDialog = defineAsyncComponent(() => import('/@/views/startfab/labelManagement/paymentMethod/addPayment.vue'));
const addDialogRef = ref()
const state = reactive({
  isHasAdd: 'admin:admin:paymentMethodAdd',
  isHasEdit: 'admin:admin:paymentMethodEdit',
  formData: {
    keyword: ''
  },
  columnData: payColumn,
  total: 0,
  pages: {
    page: 1,
    limit: 10
  },
  tableData: [],
})
const status = ref({
  1: '是',
  0: '否'
})
const addFn = () => {
  addDialogRef.value.openDialog('add')
}
const operateFn = (type, row) => {
  if (type === 'edit') {
    addDialogRef.value.openDialog('edit', row);
  } else if (type === 'delete') {
    console.log('删除');
  }
};
const getData = async () => {
  const params = {
    ...state.pages,
    search: state.formData.keyword,
  }
  PostPaymentMethodsIndex(params).then((res) => {
    if (res.code === 10000) {
      state.tableData = res.data.list
      state.total = res.data.pageInfo.count
    }
  })
}
const currentChange = (val) => {
  state.pages.page = val
  getData()
}
const sizeChange = (val) => {
  state.pages.limit = val
  getData()
}
const searchFn = () => {
  state.pages.page = 1;
  state.pages.limit = 10;
  getData()
}
onMounted(() => {
  searchFn()
})
</script>

<style scoped lang="scss">
.container {
  background: #FFFFFF;
  padding: 15px;

  ::v-deep .search-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-input-group__append {
      padding: 0px 15px;

      .el-icon {
        color: #333333;
        margin-right: 0px;
      }
    }

    .el-button {
      color: #FFFFFF;
    }
  }

  .tables {
    margin-top: 10px;
  }
}

.textleft {
  text-align: left;
}
</style>
